<template>
<div>
  <alert type="warning" closable>工作台只显示属于自己的,且未关闭的会话.</alert>
<!--  <p>{{statusList[0]}}</p>-->
  <Row style="display: flex;flex-wrap: nowrap">
    <i-col class="left_chat">
      <div style="padding: 0.52rem; height: 7vh; text-align: left; border-bottom: solid 1px #ffffff;">
        <Checkbox v-model="refresh" v-show="!isLoading" style="margin-right: 0;">
          <span v-if="!refresh">勾选后将自动更新消息</span>
          <span v-if="refresh">{{refreshTime+'秒后将自动刷新'}}</span>
        </Checkbox>
        <span v-show="isLoading">消息刷新中...</span>
        <Icon type="md-refresh-circle" :class="isLoading?'loading':''" color="#2d8cf0" :size="17" title="刷新消息"
              @click="queryStatusList()" style="cursor: pointer;"/>
      </div>

      <div style="height: 90vh; overflow-y: scroll;">
        <div v-for="(item,index) in statusList" :key="index" :class="{left_chat_item: true, item_selected: isSelected(item)}"
             @click="viewMessageDetail(item)" >
          <div>
            <div style="display: flex;align-items: center">
              <Icon type="ios-desktop-outline" v-if="item.deviceType===3" />
              <Icon type="ios-phone-portrait" v-else />
              <span style="flex-grow: 2;font-weight: 500;margin-left: 0.5rem">{{item.encodeName}}</span>
              <Badge dot :count="badgeNum(item.readed)" status="success" ></Badge>
            </div>
            <!--        <p class="item_status">处理已受理</p>-->
            <p class="item_lasttime">{{$tiyBJTime(item.userLastSendTime)}}</p>
            <p class="item_status">{{getChatState(item.state)}}</p>
            <p class="item_tags" :title="getTags(item).join(',')">{{getTags(item).join(", ")}}</p>
          </div>
        </div>
      </div>
    </i-col>
    <i-col flex="auto">
      <div style="text-align: left; height: 100vh;">
        <chat-message-detail direction="row-reverse" :user-id="currentUserId" :detail-show="isDetailShow" @refreshList="queryStatusList" v-show="isDetailShow"></chat-message-detail>
      </div>
    </i-col>
  </Row>

  <Page v-model="page.pageNum" :total="page.total" :page-size="page.pageSize" :page-size-opts="page.options" size="small" show-total show-elevator show-sizer
    @on-change="changePageNum" @on-page-size-change="changePageSize" style="margin-top: 10px;"/>
</div>

</template>

<script>
import KeyValueView from "../widgets/KeyValueView";
import {isEmpty} from "../js/commonUtils";
import chat_data from "./js/chatWorkbench/chat_data";
import {queryMyMessages} from "./js/chatWorkbench/chat_funs";
import ChatMessageDetail from "./ChatMessageDetail";
export default {
  name: "ChatWorkbench",
  components: {ChatMessageDetail, KeyValueView},
  data(){
    return {
      refresh: false,
      refreshTime: 60,
      isLoading: false,
      timer: "",
      currentItemId: "",
      currentUserId: "",
      isDetailShow: false,
      statusList: chat_data.tData.statusList,
      page: chat_data.tPage,
      messageStatusDict:[
        {  value: 600,label: '会话未开启'},
        {  value: 610,label: '会话已开启'},
        {  value: 100,label: '处理-已受理'},
        {  value: 200,label: '处理-沟通中'},
        {  value: 300,label: '处理-资源协调中'},
        {  value: 400,label: '处理-受阻'},
        {  value: 500,label: '会话关闭'}
      ],
    }
  },
  methods: {
    isEmpty(val) {
      return isEmpty(val);
    },
    getTags(item) {
      if(isEmpty(item.tags)) {
        return [];
      }
      return this.$toJson(item.tags);
    },
    queryStatusList() {
      queryMyMessages(this);
    },
    changePageNum(pageNum) {
      this.page.pageNum = pageNum;
      this.queryStatusList();
    },
    changePageSize(pageSize) {
      this.page.pageNum = 1;
      this.page.pageSize = pageSize;
      this.queryStatusList();
    },
    viewMessageDetail(item) {
      this.isDetailShow = false;
      let self = this;
      setTimeout(function () {
        self.currentItemId = item.id;
        self.currentUserId = item.userId;
        self.isDetailShow = true;
      }, 500);
    },
    isSelected(item) {
      return item.id == this.currentItemId;
    },
    badgeNum(readed) {
      return readed===0?1:0;
    },
    getChatState(state) {
      let item = this.messageStatusDict.find(item => item.value == state);
      return item==null?"":item.label;
    },
    getDeviceType(type) {
      let label = "";
      if(type==1){
        label="Android";
      }else if(type==2){
        label="IOS";
      }else if(type==3){
        label="PC";
      }
      return label;
    },
    getMessageContentType(type) {
      if(type == 100) {
        return "文本";
      }
      if(type == 200) {
        return "图片";
      }
      return "";
    },
    initPageInfo() {
      this.page.pageNum = 1;
      this.page.pageSize = 40;
      this.page.pageSize = 40;
      this.currentUserId = "";
      this.currentItemId = "";
      this.isDetailShow = false;
    },
  },
  mounted() {
    this.initPageInfo();
    this.queryStatusList();
  },
  watch: {
    refresh(newVal, oldVal) {
      if(newVal) {
        let self = this;
        this.timer = setInterval(function () {
          self.refreshTime--;
          if(self.refreshTime == 0) {
            self.queryStatusList();
          }
        }, 1000);
      }else{
        this.refreshTime = 60;
        clearInterval(this.timer);
      }
    }
  }
}
</script>

<!--css样式-->
<style scoped lang="less">
@import  (once,optional)  "../css/base.less";

.left_chat{
  min-width: 14rem;background: #f3f3f6; padding: 0.5rem 0.25rem;
}
.left_chat_item{
  min-height: 3rem;
  padding: 0.5rem 0.5rem;cursor: pointer;
  text-align: left;
  font-size: 13px;
  border-bottom: solid 1px #ffffff;
  .item_status{
    font-size:12px;
  }
  .item_lasttime{
    font-size:12px;
  }
  .item_tags{
    font-size:12px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.item_selected {
  background-color: #2d8cf0 !important;
  color: #ffffff !important;
}

.loading{
  transform: rotate(360deg);
  animation: 0.5s linear 0s infinite normal none running rotation;
}
</style>
